{extend name='admin@formmain'}
 {block name='style'}
<style type="text/css">
#yz-code-label span{
        right: 130px !important;
}
</style>
{/block}
{block name='content'}

<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
   <div class="layui-container">  
      <div class="layui-row">
{notempty name='title'}<div class="margin-bottom-10">&nbsp;</div>{/notempty}
  <div class="layui-col-md3">
    &nbsp;

    </div>
    <div class="layui-card-body padding-left-20 layui-col-md6">

        <div class="layui-form-item margin-20">
            <label class="relative block">
                <span class="font-w7">登录用户账号</span>
                <span class="color-desc margin-left-5"><!-- Account --></span>
                <!--{if isset($vo) and isset($vo.username)}-->
                <input disabled value='{$userinfo.db1.phone|default=""}' class="layui-input layui-bg-gray">
                <!--{else}-->
                <input name="username" value='{$userinfo.db1.phone|default=""}' required pattern="^.{4,}$" placeholder="请输入4位及以上字符登录用户账号" class="layui-input">
                <!--{/if}-->
            </label>
           <!--  <p class="help-block">登录用户账号创建后，不允许再次修改。</p> -->
        </div>
   <!--      <div class="layui-form-item">
            <label class="relative block">
                <span class="color-green font-w7">登录用户名称</span>
                <span class="color-desc margin-left-5">Username</span> -->
                <!--{if isset($vo) and isset($vo.username)}-->
                <!-- <input disabled value='{$vo.username|default=""}' class="layui-input layui-bg-gray"> -->
                <!--{else}-->
           <!--      <input name="username" value='{$vo.username|default=""}' required pattern="^.{4,}$" placeholder="请输入4位及以上字符登录用户账号" class="layui-input"> -->
                <!--{/if}-->
           <!--  </label> -->
           <!--  <p class="help-block">登录用户账号创建后，不允许再次修改。</p> -->
        <!-- </div> -->

        <!--{if $verify}-->
<!--         <div class="layui-form-item">
            <label class="relative block">
                <span class="color-green font-w7">旧的登录密码</span>
                <span class="color-desc margin-left-5">Old Password</span>
                <input type="password" autofocus name="oldpassword" value='' pattern="^\S{1,}$" required placeholder="请输入旧的登录密码" class="layui-input">
            </label>
            <p class="color-desc">请输入旧密码来验证修改权限，旧密码不限制格式。</p>
        </div> -->
        <!--{/if}-->

        <div class="layui-form-item margin-20">
            <label class="relative block" id="yz-code-label">
                <span class="font-w7">验证码</span>

                <input minlength="6" maxlength="6" name="yz_code" value='' required placeholder="请输入验证码" class="layui-input">
               
                <button style="position: absolute; top: 24px;right: 0" id="send-code-button"  type="button" class="layui-btn layui-btn-normal">发送短信验证码</button>
                <input type="hidden" name="user_phone" value="{$userinfo['db1']['phone']}">
            </label>

        </div>


        <div class="layui-form-item margin-20">
            <label class="relative block">
                <span class="cfont-w7">新的登录密码</span>
                <span class="color-desc margin-left-5"><!-- New Password --></span>
                <input type="password" name="password" maxlength="32" pattern="^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,32}$" required placeholder="密码必需包含大小写字母、数字、符号的任意两者组合。" class="layui-input">
            </label>
            <p class="color-desc"><!-- 密码必需包含大小写字母、数字、符号的任意两者组合。 --></p>
        </div>

        <div class="layui-form-ite margin-20">
            <label class="relative block">
                <span class="font-w7">确认密码</span>
                <span class="color-desc margin-left-5"><!-- Retype Password --></span>
                <input type="password" name="repassword" maxlength="32" pattern="^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,32}$" required placeholder="确认密码和新密码保持一致" class="layui-input">
            </label>
         <!--    <p class="color-desc">密码必需包含大小写字母、数字、符号的任意两者组合。</p> -->
        </div>

    </div>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}

    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取 消</button>
    </div>
{notempty name='title'}<div class="margin-top-20">&nbsp;</div>{/notempty}
</div>
</div>
</form>
{/block}



 {block name='script'}
<script type="text/javascript">
        var seconds = 15;


        $("#send-code-button").on('click',function() {

        if($('#send-code-button').text()!="发送短信验证码"){$.msg.error('请稍后再试');return}
        var phone_number = $("input[name='user_phone']").val()
        // $("input[name='new_phone']").attr('disabled',true)
        postData = {};
        postData['new_phone'] = phone_number
        postData['c_type'] = 'Ch_pass'

        // $(data).each(function(i) {
        //     postData[this.name]= this.value;
        // });
        // postData['create_at']=create_at;
        // 将获取到的数据post给服务器
        url = SCOPE.send_url;
        $.post(url, postData, function(result) {
            if (result.code == 1) {
                //成功
                $('#send-code-button').text('验证码已发送')
                var interval_send = setInterval(function(){
                          seconds = seconds-1
                          $('#send-code-button').text(seconds)
                          if(seconds == 0){
                               $('#send-code-button').text('发送短信验证码')
                               clearInterval(interval_send);
                               seconds = 15;
                            }
                      },1000)

                layer.open({
                    content: result.info,
                    icon: 1,
                    title: '成功提示'
                });
                //return dialog.success(result.info);
            } else if (result.code == 0) {
                //$("input[name='new_phone']").attr('disabled',false)
                // 失败
                // 
                //$('#send-code-button').text('验证码已发送')
                var interval_send = setInterval(function(){
                          seconds = seconds-1
                          $('#send-code-button').text(seconds)
                          if(seconds == 0){
                               $('#send-code-button').text('发送短信验证码')
                               clearInterval(interval_send);
                               seconds = 15;
                            }
                      },1000)
                layer.open({
                    content: result.info,
                    icon: 2,
                    title: '错误提示'
                });
                //return dialog.error(result.info);
            }
        }, "JSON");
    });


        var SCOPE = {
        'send_url' : "{:url('personal/personal/send_code')}",
    };
</script>
{/block}